<!--课程考核实施计划变更申请记录-->
<template>
  <div class="change-record-assessment-container">
    <div class="search-container" style="margin:0">
      <div class="search-container-item" style="margin-left:0">
        <span style="color: #004ca7;margin-top: 5px;">学期：</span>
        <el-select v-model="semester" style="width: 120px" size="mini" placeholder="请选择" clearable>
          <el-option v-for="item in xueqiList" :key="item.value" :label="item.xqmc" :value="item.xqmc">
          </el-option>
        </el-select>
      </div>
      <div class="search-button" style="position:relative;top:2px" @click="ByIdJueSe">
        <img src="../../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
    </div>
    <div class="table-container" style="margin-top:45px">
      <div class="table-header">
        <div class="item" style="width: 171px">教研室</div>
        <div class="item" style="width: 159px">课程名称</div>
        <div class="item" style="width: 148px">年级</div>
        <div class="item" style="width: 179px">教学班</div>
        <div class="item" style="width: 362px">专业班次</div>
        <div class="item" style="width: 158px">参评对象</div>
        <div class="item" style="width: 180px">修改说明</div>
        <div class="item" style="width: 145px">状态</div>
        <div class="item" style="width: 187px">操作</div>
      </div>
      <div class="table-body" v-for="(item, index) in tableData" :key="index">
        <div class="item" style="width: 171px">{{ item.staffroom }}</div>
        <div class="item" style="width: 159px">{{ item.coursename }}</div>
        <div class="item" style="width: 148px">{{ item.grade }}</div>
        <div class="item" style="width: 179px">{{ item.classes }}</div>
        <div class="item-border right-content">
          <div class="right-content-info">
            <div class="item" style="width: 362px">{{ item.majorclasses }}</div>
            <div class="item" style="width: 158px">{{ item.teachername }}</div>
            <div class="item" style="width: 180px">{{ item.description }}</div>
            <div class="item" style="width: 145px">
              <template>
                <span v-if="item.state == 32">
                  审核通过
                </span>
                <span v-if="item.state == 31">
                  待管理员审核
                </span>
                <span v-if="item.state == 12">
                  待系领导审核
                </span>
                <span v-if="item.state == 0">
                  待发起
                </span>
                <span v-if="item.state == 1">
                  待课程负责人审核
                </span>
                <span v-if="item.state == 11">
                  待教研室主任审核
                </span>
                <span v-if="item.state == 23">
                  管理员审核驳回
                </span>
              </template>
            </div>
            <div class="item" style="width: 187px">
              <div class="tj-button" style="cursor: pointer" @click="
                updateById(
                  item.state,
                  item.evalactorid,
                  item.pjChecks[1].state
                )
              ">
                <span v-if="item.pjChecks[1].state == 1 && item.pjChecks[1].checkid">已审核</span>
                <span v-else-if="
                  item.pjChecks[1].state == -1 && item.pjChecks[1].checkid
                ">未审核</span>
                <span v-else>待审核</span>
              </div>
              <div class="xg-button" @click="
                showYprDial(item.state, item.teacherid, item.evalactorid)
              ">
                修 改
              </div>
              <showYprDialog :dialogTitle="dialogTitle" :showYprDialog="showYprDialog"
                @showYprDialClick="showYprDialClick" @renew="renew"></showYprDialog>

              <div class="dahui-button" style="cursor: pointer" @click="
                dahuijuese(
                  item.state,
                  item.evalactorid,
                  index,
                  item.pjChecks[0].state
                )
              ">
                <!-- <span
                  v-if="item.pjChecks[0].state == 0 && item.pjChecks[0].checkid"
                  >上级审核</span
                > -->
                <span>打 回</span>
              </div>
            </div>
          </div>
          <div class="spjd">
            <div class="spjd-title">审批进度：</div>
            <div class="time-line-horizon">
              <div style="width: 205px;" class="time-line-block" v-for="(block, index1) in item.pjChecks" :key="index1">
                <div class="person-name" style="width: 80%">{{ block.job }}</div>
                <div class="line-content">
                  <img src="../../../assets/assessment/icon-finish.png" alt="已审批" v-if="+block.state === 1" />
                  <img src="../../../assets/assessment/icon-dai.png" alt="待审批" v-if="+block.state === 0" />
                  <img src="../../../assets/assessment/icon-close.png" alt="未审批" v-if="+block.state === -1" />
                  <div class="date-time">
                    <span class="date">{{ block.checkdate }}</span>
                    <span class="time">{{ block.time }}</span>
                  </div>
                </div>
                <div class="operate" v-if="index1 === 0">
                  <div style="left:-120px;" class="ly-block" @click="buttonClick('留言', item.pjChecks[1], index, item)">
                    <img src="../../../assets/assessment/icon-ly.png" alt="" />
                    <div class="ly">留言</div>
                  </div>
                  <div class="bubble-block" v-show="block.text" style="width: 90%;top:-72px;">
                    <span @click="buttonClick('查看', block, index, item)"
                      style=" white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  display: block;width:56px;">{{
                          block.text
                      }}</span>
                    <div class="operate-button">
                      <div class="button-ck" @click="buttonClick('查看', block, index, item)" v-show="block.text">
                        查看
                      </div>
                      <div class="button-bj" @click="buttonClick('编辑', block, index, item)" v-show="block.text"
                        v-if="item.state == 11 && index1 == 1">
                        编辑
                      </div>
                      <div @click="buttonClick('删除', block, index, item)" class="button-sc" v-show="block.text"
                        v-if="item.state == 11 && index1 == 1">
                        删除
                      </div>
                    </div>
                  </div>
                </div>
                <div class="operate" v-show="block.text" v-if="index1 !== 0">
                  <div class="bubble-block" style="width: 100%">
                    <span @click="buttonClick('查看', block, index, item)"
                      style=" white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  display: block;width:56px;">{{
                          block.text
                      }}</span>
                    <div class="operate-button">
                      <div class="button-ck" @click="buttonClick('查看', block, index, item)" v-show="block.text">
                        查看
                      </div>
                      <div class="button-bj" @click="buttonClick('编辑', block, index, item)" v-show="block.text"
                        v-if="item.state == 11 && index1 == 1">
                        编辑
                      </div>
                      <div @click="buttonClick('删除', block, index, item)" class="button-sc" v-show="block.text"
                        v-if="item.state == 11 && index1 == 1">
                        删除
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="添加留言" :visible.sync="showAddMessageDialog" width="983px">
      <div class="message-container">
        <div>添加留言：</div>
        <div>
          <el-input v-model="text1.text" type="textarea" :rows="8" style="width: 550px"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!--                      showbjMessageDialog = false-->
        <button class="green" @click="addText">
          确 定
        </button>
      </span>
    </el-dialog>

    <el-dialog title="编辑留言" :visible.sync="showbjMessageDialog" width="983px">
      <div class="message-container">
        <div>编辑留言：</div>
        <div>
          <el-input v-model="text1.text" type="textarea" :rows="8" style="width: 550px"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!--                      showbjMessageDialog = false-->
        <button class="green" @click="update">
          确 定
        </button>
      </span>
    </el-dialog>
    <el-dialog title="查看留言" :visible.sync="showckMessageDialog" width="983px">
      <div class="message-container">
        <div>查看留言：</div>
        <div>
          <!--                        v-model="block.bjmeaasgeText"-->
          <el-input v-model="text1.text" type="textarea" :rows="8" style="width: 550px" disabled="false"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="showckMessageDialog = false">
          确 定
        </button>
      </span>
    </el-dialog>

    <!--    打回-->
    <el-dialog title="驳回选择" :visible.sync="showExportReportDialog" width="1185px" class="manual-entry-container">
      <div class="manual-entry-container">
        <el-row>
          <el-col :span="12">
            <div style=" background: rgba(77, 129, 192, 0.1);">打回至:</div>
          </el-col>
          <el-col :span="12">
            <el-radio-group v-model="reportTypep" @change="evaor">
              <el-radio v-for="(item, index) in reportTypepss" :label="item.label" :key="index" class="large">{{
                  item.value
              }}
              </el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
      </div>
      <span class="button-group" style="display:block">
        <div @click="ubohuipdateById">
          <div>确 定</div>
        </div>
        <div @click="showExportReportDialog = false">
          <div>取 消</div>
        </div>
      </span>
    </el-dialog>
    <!--审核弹窗-->
    <el-dialog title="提示" :visible.sync="showMessageDialog" width="983px" style=" height:520px"
      class="message-container">
      <div class="message-text">
        <div v-if="this.namelist.plan"></div>
        <div v-else>确定要删除吗？</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="pjdelete('Message')">确 定</button>
      </span>
      <span slot="footer" class="dialog-footer">
        <button class="yellow" @click="dialogClickconfirm('Message')">
          取 消
        </button>
      </span>
    </el-dialog>

    <!--  导出Excel  -->
    <div class="bottom-block">
      <div class="export-button">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <download-excel class="export-btn" :data="tableData" :fields="jsonFields" type="xls" name="教研室主任评教信息.xls"
          style="color: #f3b815">
          &ensp;导出Excel
        </download-excel>
      </div>
    </div>
  </div>
</template>

<script>
import showYprDialog from "@/views/comonents/showYprDialog";
import { reqGetXqList } from "@/api/course/courses";
import {
  textupdatesave,
  txtdelete,
  UpdateID,
  addText,
  ByIdJueSe,
  updateById,
  ubohuipdateById
} from "@/api/teacher/supervision";
import { mapGetters } from "vuex";

export default {
  components: {
    showYprDialog
  },

  data() {
    return {
      //导出Excel
      jsonFields: {
        教研室: "staffroom",
        课程名称: "coursename",
        年级: "grade",
        教学班: "classes",
        专业班次: "majorclasses",
        参评对象: "teachername",
        修改说明: "description"
      },
      semester: '',
      // id: '1',
      xueqi: "",
      xueqiList: [],
      asts: "",
      text1: {
        text: ""
      },
      date: "",
      time: "",
      evalactorid: "",
      showYprDialog: "",
      dialogTitle: "",

      eid: "",
      tid: "",
      tname: "",
      text: "",
      checkid: "",
      roleid: [],
      up: {
        classname: "",
        name: ""
      },
      eligibleaaa: {
        eid: ""
      },
      teacherid: "",
      tableData: [],
      //审核弹窗
      showMessageDialog: false,
      //打回审核
      showExportReportDialog: false,
      //添加留言
      showAddMessageDialog: false,
      //编辑留言
      showbjMessageDialog: false,
      //查看留言
      showckMessageDialog: false,
      meaasgeText: "",
      course: "",
      showEditDialog: true,
      searchNameList: [],
      handleSelection: [],

      //打回
      reportTypep: "",
      reportTypepss: [
        {
          label: "1493803391148023811",
          value: "大队长",
          id: "242"
        }
      ],
      namelist: {},
      ul_list: [
        { id: 1, name: "张三丰", number: "23654236985", active: false },
        { id: 2, name: "张三丰", number: "23654236985", active: false },
        { id: 2, name: "张三丰", number: "23654236985", active: false },
        { id: 2, name: "张三丰", number: "23654236985", active: false },
        { id: 2, name: "张三丰", number: "23654236985", active: false }
      ],
      room: "",
      rooms: [
        { label: "部门一", value: "部门一" },
        { label: "部门二", value: "部门二" },
        { label: "部门三", value: "部门三" }
      ]
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  mounted() {
    this.getXqList();
    // this.pjevalactor();
  },
  methods: {
    // 获取学期院历列表
    async getXqList() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        this.xueqiList = result.data.data;
        this.semester = result.data.data.length > 0 ? result.data.data[0].xqmc : ''
        this.ByIdJueSe();
      }
    },
    //审核流
    buttonClick(type, black, index, row) {
      if (row.state == 11 || type == "查看") {
        this.text1 = {};
        // console.log(black, "black");
        this.text1 = {
          checkid: black.checkid,
          text: black.text,
          index: index
        };
        if (type === "留言") {
          this.showAddMessageDialog = true;
          this.text1.text = ''
          // console.log(this.text1);
        } else if (type === "查看") {
          (this.showckMessageDialog = true);
          // console.log(this.text1);
        } else if (type === "编辑") {
          this.showbjMessageDialog = true;
          // console.log(this.text1);
        } else if (type === "删除") {
          this.textdelete();
        }
      } else {
        this.$message("不能操作");
      }
    },

    //查看所有角色
    ByIdJueSe() {
      let obj = {
        xueqi: this.semester,
        // id: this.id
      };
      ByIdJueSe(obj).then(res => {
        if (res.status == 200) {
          if (res.data.data.length <= 0) {
            this.$message({
              type: 'info',
              message: '暂无数据！'
            })
            return
          }
          this.tableData = res.data.data;
          console.log(
            this.tableData,
            "this.tableData=========角色============="
          );
          for (let i = 0; i < this.tableData.length; i++) {
            for (let x = 0; x < this.tableData[i].pjChecks.length; x++) {
              let pjChecks = this.tableData[i].pjChecks;
              let role_id = this.userInfo.role_id;
              this.role_id = this.userInfo.role_id;
              console.log(this.userInfo.role_id, "this.userInfo.role_id");
              let roleid = this.tableData[i].pjChecks[x].roleid;
              this.roleid = this.tableData[i].pjChecks[x].roleid;
              console.log(
                this.tableData[i].pjChecks[x].roleid,
                "this.tableData[i].pjChecks[x].roleid"
              );
              console.log(this.tableData[i].pjChecks[x].state);
              if (pjChecks.length > 0) {
                pjChecks[x] = {
                  checkdate: pjChecks[x].checkdate.split("T")[0],
                  time: pjChecks[x].time.split("T")[0],
                  checkid: pjChecks[x].checkid, //角色对应的id
                  text: pjChecks[x].text, //留言
                  job: pjChecks[x].job, //角色名
                  state: pjChecks[x].state,
                  dengji: pjChecks[x].roleid
                };
              }
              if (role_id == roleid) {
                this.tableData[i].checkid = this.tableData[i].pjChecks[
                  x
                ].checkid;
                // this.tableData[i].status = this.tableData[i].shspeeds[x].chstatus
                console.log(this.tableData[i].pjChecks[x].state);
              }
            }
          }
        }
      });
    },
    evaor(label) {
      this.asts = label;
    },
    //审核打回
    dahuijuese(bigState, evalactorid, index, state) {
      if (bigState == 11) {
        this.evalactorid = evalactorid;
        this.state = state;
        if (this.state == 0) {
          this.$message.error("此条信息一被打回，需课程负责人重新审核!");
        } else {
          this.showExportReportDialog = true;
          console.log(this.evalactorid, " this.evalactorid");
          this.dahui(evalactorid, index);
        }
      } else {
        this.$message("不能打回");
      }
    },
    dahui(evalactorid, index) {
      let pjChecks = this.tableData[index].pjChecks;
      console.log("pjChecks", pjChecks);
      let arr = [];
      let obj;
      for (const shspeedsKey in pjChecks) {
        if (+pjChecks[shspeedsKey].state === 1) {
          let job = pjChecks[shspeedsKey].job;
          obj = {
            label: pjChecks[shspeedsKey].dengji,
            value: job,
            checkid: this.tableData[index].pjChecks[shspeedsKey].checkid
          };
          arr.push(obj);
        }
        this.reportTypepss = arr;
      }
      console.log(this.reportTypepss);
    },
    //打回确定
    ubohuipdateById() {
      let obj = {
        bohuijuese: this.asts,
        evalactorid: this.evalactorid
      };
      console.log("this.reportTypep", this.reportTypep);
      if (this.reportTypep || this.reportTypep === 0) {
        obj.reject = this.reportTypep;
      } else {
        this.$message.error("没有选择打回人");
        return;
      }
      this.showExportReportDialog = false;
      return new Promise(() => {
        //网上评教修改保存
        ubohuipdateById(obj).then(res => {
          if (res.data.code === 200) {
            //  console.log("=======================",this.tableData[0].pjChecks[0].state)

            this.ByIdJueSe();
          }
        });
      });
    },

    //教员评教信息核对(查询)EditUpdate(item.evalactorid)
    showYprDialClick: function (teacherid) {
      this.showYprDialog = teacherid;
    },
    //点修改完成页面参评对象的修改
    showYprDial(bigState, teacherid, evalactorid) {
      if (bigState == 11) {
        this.evalactorid = evalactorid;
        this.dialogTitle = "修改";
        this.showYprDialClick(teacherid);
      } else {
        this.$message("不能修改");
      }
    },
    //更新
    renew: function (id, name) {
      let obj = {
        evalactorid: this.evalactorid,
        teacherid: id,
        teachername: name
      };
      //修改传值
      return new Promise(() => {
        //网上评教修改保存
        UpdateID(obj).then(() => {
          this.ByIdJueSe();
        });
        console.log("renew", id, name);
      });
    },

    //提交     updateById
    updateById(bigState, evalactorid, state) {
      console.log(bigState)
      if (bigState == 11) {
        this.evalactorid = evalactorid;
        this.state = state;
        let submit = {
          id: this.id,
          evalactorid: this.evalactorid,
          date: this.date,
          time: this.time,
          state: this.state
        };
        updateById(submit).then(() => {
          if (this.state == 1) {
            this.$message({
              type: "error",
              message: "此条信息只能审核一次!"
            });
          } else {
            this.$message({
              type: "success",
              message: "申请成功"
            });
          }
          this.ByIdJueSe();
        });
      } else {
        this.$message("不能操作");
        return
      }
    },

    //教员评教信息核对(点击查看留言)
    textsave(checkid) {
      this.text1 = {
        text: this.text1.text,
        checkid: checkid
      };
      this.text = this.text1.text;
      console.log("======查看留言========", this.text, checkid);
      this.showckMessageDialog = true;
      console.log(this.showckMessageDialog, "this.showckMessageDialog");
    },

    //教员评教信息核对(修改留言)
    update() {
      let pj = this;
      let obj = {
        checkid: this.text1.checkid,
        text: this.text1.text
      };
      textupdatesave(obj).then(res => {
        if (res.status == 200) {
          pj.showbjMessageDialog = false;
          this.ByIdJueSe();
          this.$message({
            showClose: true,
            message: "修改成功",
            type: "success"
          });
        }
      });
      // })
    },

    //删除留言textdelete(block.checkid)
    textdelete() {
      let checkid = this.text1.checkid;
      return new Promise(() => {
        txtdelete(checkid).then(res => {
          if (res.status == 200) {
            this.$message({
              showClose: true,
              message: "删除成功",
              type: "success"
            });
            this.ByIdJueSe();
          }
        });
      });
    },

    //添加留言
    addText() {
      console.log(
        this.tableData[this.text1.index].pjChecks[this.text1.index].checkid,
        "this.tableData[this.text1.index].checkid,"
      );
      // console.log("text==================",block.text)
      let pj = this;
      let obj = {
        checkid: this.tableData[this.text1.index].pjChecks[1].checkid,
        // checkid: this.text1.checkid,
        text: this.text1.text
      };
      console.log(this.text1.checkid, "this.text1.checkid");
      console.log("this.role_id==================", this.role_id);
      console.log("text==================", this.text1.text);
      return new Promise(() => {
        addText(obj).then(res => {
          if (res.status == 200) {
            pj.showAddMessageDialog = false;
            this.$message({
              showClose: true,
              message: "添加成功",
              type: "success"
            });
            this.ByIdJueSe();
          }
        });
      });
    },
    change() {
      this.$nextTick(() => {
        let nodelist = document.querySelectorAll(".el-select__tags-text");
        if (nodelist.length >= 2) {
          nodelist[1].innerText = `(已选${this.zt.length})`;
        }
      });
    },
    toChangePlanDetail() {
      this.$router.push("/teacher/assessment/changeRecordDetail");
    },
    activeLi(item) {
      item.active = !item.active;
    }
  }
};
</script>

<style lang="less" scoped>
.button-group {
  cursor: pointer;
  margin-top: 50px;
  text-align: center;

  >div {
    display: inline-block;
    font-size: 18px;
    padding: 6px 22px;
    border-radius: 6px;

    &:nth-child(1) {
      color: #f3b815;
      border: 1px solid #f3b815;
      background: #fff6ef;
      margin-right: 139px;
    }

    &:nth-child(2) {
      color: #ff3819;
      border: 1px solid #ff3819;
      background: #ffefef;
    }
  }
}

.search-container {
  justify-content: flex-start !important;
  // width: 600px;
  height: 5px;
  margin-top: 30px;

  .search-container-item {
    float: left;
    margin-left: 20px;
  }
}

.cz-close>img {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.cz-close {
  background: #ffefef;
  border: 1px solid #fa5339;
  color: #fa5339;
  box-sizing: border-box;
  width: 78px;
  height: 27px;
  line-height: 24px;
  border-radius: 4px;
  text-align: center;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

.manual-entry-container {
  .el-dialog__body {
    >div {
      width: 1014px;
      border: 1px solid rgba(0, 76, 167, 0.8);
      border-radius: 6px;
      margin: 0 auto;

      >div {
        border-bottom: 1px solid rgba(0, 76, 167, 0.39);

        &:last-child {
          border-bottom: none;
        }

        >div {
          display: flex;

          >div {
            height: 96px;
            display: flex;
            align-items: center;
            justify-content: center;

            flex-wrap: wrap;
            flex-direction: row;
            align-content: stretch;

            &:nth-child(1) {
              width: 80%;

              text-align: center;
              font-size: 16px;
              font-weight: bold;
              color: #004ca7;
            }

            &:nth-child(1) {
              height: 200px;
            }
          }
        }
      }
    }
  }

  .el-dialog__footer {
    padding-bottom: 43px;
  }

  .dialog-footer {}
}

.cancle-button {
  .confirm-button;
  background: #ffefef;
  border: 1px solid #ff3819;
  color: #ff3819;
  margin-right: 0px;
}

.confirm-button {
  width: 87px;
  height: 36px;
  padding: 0;
  background: #f1fff8;
  border: 1px solid #02c86c;
  border-radius: 4px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #02c86c;
  cursor: pointer;
  margin-right: 92px;
}

.choose-ypr-container {
  width: 767px;
  margin: 0px auto;

  .choose-ypr-search-container {
    .el-input--prefix .el-input__inner {
      padding-left: 30px;
    }

    .el-input__inner {
      &::placeholder {
        color: #b8b8b8;
      }

      &::-webkit-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #b8b8b8;
      }

      &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 适配火狐 */
        color: #b8b8b8;
      }

      &::-moz-placeholder {
        /* Mozilla Firefox 19+ 适配火狐 */
        color: #b8b8b8;
      }

      &:-ms-input-placeholder {
        /* Internet Explorer 10+  适配ie*/
        color: #b8b8b8;
      }
    }

    display: flex;
    flex-direction: row;
    align-items: center;

    .title {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
      margin-right: 5px;
    }

    .search-button {
      width: 77px;
      height: 28px;
      line-height: 28px;
      background: #f1f8fe;
      border: 1px solid #51aef6;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      float: left;

      >span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #51aef6;
      }

      >img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }

    .button-list {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 21px;

      .button-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 69px;
        height: 27px;
        line-height: 27px;
        border: 1px solid #004ca7;
        border-radius: 4px;
        margin-right: 10px;
        text-align: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #004ca7;

        .del-icon {
          position: absolute;
          right: 0px;
          top: 0px;
          width: 12px;
          height: 12px;
          padding: 2px;
        }
      }
    }
  }

  .choose-ypr-table-container {
    margin-top: 30px;

    .el-table td,
    .el-table th.is-leaf,
    .el-table--border,
    .el-table--group {
      border-color: #c7d7eb;
    }

    .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 57px;
      background-color: #edf2f9;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
    }

    .el-table__body tr,
    .el-table__body td {
      padding: 0;
      height: 51px;
    }

    .table-data {
      width: 100%;
      border: 0.8px solid #004ca7;
      border-radius: 9px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;
    }
  }
}

.change-record-assessment-container {
  .search-button {
    width: 77px;
    height: 28px;
    line-height: 28px;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-left: 200px;

    >span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #51aef6;
    }

    >img {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }
  }

  .edit-message-container {
    .el-dialog__body {
      padding: 29px 193px 66px;

      >div {
        >div {
          &:nth-child(1) {
            margin-bottom: 20px;

            >div {
              display: inline-block;

              &:nth-child(1) {
                font-size: 18px;
                font-weight: bold;
                line-height: 20px;
                color: #004ca7;
              }

              &:nth-child(2) {
                >div {
                  display: inline-block;
                  border: 1px solid #004ca7;
                  border-radius: 4px;
                  margin-right: 10px;
                  font-size: 14px;
                  font-weight: 400;
                  padding: 4px 17px 4px 10px;
                  color: #004ca7;
                  position: relative;

                  >img {
                    cursor: pointer;
                    position: absolute;
                    top: 3px;
                    right: 5px;
                  }
                }
              }
            }
          }

          &:nth-child(2) {
            margin-bottom: 26px;

            >div {
              display: inline-block;
              vertical-align: middle;

              &:nth-child(1) {
                font-size: 18px;
                font-weight: bold;
                line-height: 20px;
                color: #004ca7;
              }

              .search-input {
                display: inline-block;
                position: relative;
                margin-right: 20px;
                margin-left: 30px;

                .el-input__inner {
                  padding-left: 34px;
                }

                >img {
                  position: absolute;
                  top: 6px;
                  left: 10px;
                  z-index: 99;
                }
              }

              .search-button {
                vertical-align: middle;
                display: inline-block;
                cursor: pointer;
                width: 78px;
                height: 27px;
                background: #f1f8fe;
                border: 1px solid #51aef6;
                opacity: 1;
                border-radius: 6px;
                padding: 2px 9px;

                >img {
                  width: 20px;
                  height: 20px;
                  vertical-align: -4px;
                  margin-right: 5px;
                }

                >span {
                  font-size: 16px;
                  font-weight: 400;
                  color: #51aef6;
                }
              }
            }
          }
        }

        >ul {
          list-style: none;

          li {
            display: inline-block;
            width: 244px;
            height: 74px;
            background: rgba(77, 129, 192, 0.04);
            border: 1px solid #004ca7;
            border-radius: 5px;
            padding: 11px 27px;
            margin-bottom: 36px;
            position: relative;
            cursor: pointer;

            >img {
              display: none;
            }

            &.active {
              background: #004ca7;

              >img {
                display: block;
                position: absolute;
                top: 7px;
                right: 7px;
              }

              >div {
                color: white;
              }
            }

            &:nth-child(3n-1) {
              margin-left: 61px;
              margin-right: 61px;
            }

            >div {
              font-size: 16px;
              font-weight: bold;
              color: #004ca7;
              margin-bottom: 10px;

              >span {
                font-weight: 400;
              }
            }
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 132px;

      .dialog-footer {
        >button {
          &:nth-child(1) {
            width: 87px;
            height: 36px;
            background: #fff6ef;
            border: 1px solid #f3b815;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 400;
            color: #f3b815;
            margin-right: 117px;
          }

          &:nth-child(2) {
            width: 87px;
            height: 36px;
            background: rgba(255, 239, 239, 1);
            border: 1px solid rgba(255, 56, 25, 1);
            border-radius: 6px;
            font-size: 16px;
            font-weight: 400;
            color: rgba(255, 56, 25, 1);
          }
        }
      }
    }
  }
}
</style>
<style lang="less" scoped>
@import "../../../styles/info-check.less";

.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.message-container {
  >div {
    display: inline-block;

    &:nth-child(1) {
      padding-left: 111px;
      font-size: 20px;
      color: rgba(0, 76, 167, 1);
      font-weight: bold;
      vertical-align: top;
    }

    &:nth-child(2) {}
  }
}

.dahui-button {
  cursor: pointer;
  width: 78px;
  height: 27px;
  line-height: 23px;
  border-radius: 6px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  margin: 3px 0;
  background: #fef0f0;
  border: 1px solid #fbc4c4;
  color: #F56C6C;

  &:hover {
    background: #F56C6C;
    border: 1px solid #F56C6C;
    color: #fff;
  }
}
</style>
